site_8g/src/app/[locale]/(ordinary)/profile/page.scss

.main {
    padding: .44rem 0 .04rem;
    min-height: 100vh;
    background-color: #1f1f1f;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    .userContent {
      background: -webkit-gradient(linear, left top, left bottom, from(#ffaa30), to(#ffe6be));
      background: -webkit-linear-gradient(top, #ffaa30, #ffe6be);
      background: -o-linear-gradient(top, #ffaa30 0, #ffe6be 100%);
      background: linear-gradient(180deg, #ffaa30, #ffe6be);
      min-height: .93rem;
    }
    .userInfo {
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-box-align: start;
      -ms-flex-align: start;
      align-items: flex-start;
      height: .56rem;
      padding: .11rem .18rem;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      & > div {
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        height: .36rem;
        font-size: .14rem;
        color: #000;
        .bgImg {
          width: .36rem;
          height: .36rem;
          margin-right: .1rem;
          background-color: transparent;
          background-image: url('/img/logo.webp');
          background-size: 100% 100%;
        }
        & > div {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          -ms-flex-direction: column;
          flex-direction: column;
          height: .36rem;
          -webkit-box-pack: justify;
          -ms-flex-pack: justify;
          justify-content: space-between;
        }
        .phone {
          font-size: .12rem;
        }
      }

      .goto {
        display: flex;
        align-items: center;
        cursor: pointer;
      }

      .iconfont {
        font-size: .16rem;
        font-weight: 700;
        -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        transform: rotate(180deg);
        margin-left: .04rem;
      }
    }

    .coin {
      display: flex;
      justify-content: space-between;
      padding: .07rem 0 .3rem;
      margin: 0 .18rem;
      border-top: .01rem dotted #d9a801;

      & > div {
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 50%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;

        &:first-child {
          border-right: .01rem dotted #d9a801;
        }

        .iconfont {
          margin: 0 .08rem;
          font-size: .18rem;
        }

        & > div {
          flex: 1;
          display: flex;
          flex-direction: column;
        }
        
        div {
          span {
            font-size: .12rem;
          }
          .num {
            width: 100%;
            height: auto;
            display: flex;
            span {
              font-size: .14rem;
              &:first-child {
                margin-right: .04rem;
              }
            }
          }
        }
      }
    }
    .link {
      width: 100%;
      height: auto;
      margin-top: -.22rem;
      display: flex;
      align-items: center;
      justify-content: center;
      span {
        width: 1.63rem;
        height: .44rem;
        line-height: .44rem;
        background: -o-linear-gradient(top, #ff9323, #ff6a01);
        background: linear-gradient(180deg, #ff9323, #ff6a01);
        border-radius: .04rem;
        color: #fff;
        font-size: .14rem;
        margin: 0 .08rem;
        text-align: center;
      }
    }
    ul {
      li {
        color: #fff;
        height: .5rem;
        line-height: .5rem;
        font-size: .14rem;
        border-bottom: .01rem solid #3f3f3f;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin: 0 .18rem;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        line-height: .2rem;
        &.free {
          padding-top: .12rem;
          margin: 0;
          padding: 0 .18rem;
          border-bottom: .08rem solid #131212;
        }
        & > div {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
        }
        .icon-hot {
          font-size: .16rem;
          color: #fc9b26;
          margin-left: .1rem;
        }
        div {
          &.content {
            .iconfont {
              margin-right: .04rem;
              margin-left: .1rem;
              font-size: .16rem;
            }
          }
        }
        .iconfont {
          &.icon-to {
            -webkit-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
            transform: rotate(180deg);
          }
        }
      }
    }
    .logOut {
      color: #fff;
      font-size: .12rem;
      width: 1rem;
      height: .34rem;
      line-height: .34rem;
      display: block;
      margin: .1rem auto .3rem;
      text-align: center;
      cursor: pointer;
    }
  }